import React, { useState, useEffect } from 'react';
import { LaptopOutlined, UserOutlined, ClockCircleOutlined, FieldTimeOutlined } from '@ant-design/icons';
import { Layout, Menu, Button, Input, Image, Typography, DatePicker } from 'antd';
import { useNavigate } from 'react-router-dom';

const { Header, Content, Sider } = Layout;
const { Text } = Typography;

const items2 = [
    {
        icon: <UserOutlined />,
        label: "启动会议",
        key: 'startMeeting',
    },
    {
        icon: <LaptopOutlined />,
        label: "历史会议",
        key: 'historyMeeting',
    },
];

const userAccountPath = '/Userinf';
const historyMeetingPath = '/historyMeeting';
const detailMeetingPath = '/detailMeeting';

const mockMeetingData = [
    {
        id: 1,
        title: "会议1",
        time: "2024-10-01 10:00",
        duration: "1小时",
        details: "会议详情1",
    },
    {
        id: 2,
        title: "会议2",
        time: "2024-10-02 14:00",
        duration: "2小时",
        details: "会议详情2",
    },
];

function Hisvideo() {
    const navigate = useNavigate();
    const [meetings, setMeetings] = useState(mockMeetingData);
    const [searchKeyword, setSearchKeyword] = useState(''); // 状态管理搜索关键词

    const handleMenuClick = (e) => {
        if (e.key === 'startMeeting') {
            navigate('/svideo');
        } else if (e.key === 'historyMeeting') {
            navigate(historyMeetingPath);
        }
    };

    useEffect(() => {
        setMeetings(mockMeetingData.map(meeting => ({
            ...meeting,
            status: calculateStatus(meeting.time, meeting.duration)
        })));
    }, []);

    const handleSearch = (value) => {
        setSearchKeyword(value);
    };

    const filteredMeetings = meetings.filter(meeting => 
        meeting.title.includes(searchKeyword) || 
        meeting.time.includes(searchKeyword) ||
        meeting.duration.includes(searchKeyword)
    );

    const calculateStatus = (time, duration) => {
        const meetingTime = new Date(time);
        const now = new Date();
        const meetingEndTime = new Date(meetingTime.getTime() + parseInt(duration) * 60 * 60 * 1000);

        if (meetingTime > now) {
            return '未开始';
        } else if (meetingEndTime > now) {
            return '进行中';
        } else {
            return '已结束';
        }
    };

    return (
        <Layout style={{ height: '100vh', margin: 0 }}>
            <Header
                style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    width: '100%',
                    height: '64px',
                    backgroundColor: 'white',
                    borderBottom: '1px solid #e8e8e8',
                }}
            >
                <Image src='/logo.png' preview={false} style={{ width:'70px', marginLeft: '-50px', marginTop: '-10px'}}/>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['2']}
                        items={[]}
                        style={{ flex: 1, minWidth: 0 }}
                    />
                    <Button
                        type="primary"
                        shape="circle"
                        icon={<UserOutlined style={{ fontSize: '20px' }} />}
                        size="large"
                        onClick={() => navigate(userAccountPath)}
                        style={{ backgroundColor: 'blue', border: '1px solid #ccc' }}
                    >
                    </Button>
                </div>
            </Header>
            
            <Layout>
                <Sider
                    width={200}
                    style={{ background: '#fff', borderRight: '1px solid #e8e8e8' }}
                >
                    <Menu
                        mode="inline"
                        defaultSelectedKeys={['1']}
                        items={items2}
                        onSelect={handleMenuClick}
                        style={{ height: '100%', borderRight: 0 }}
                    />
                </Sider>

                <Layout style={{ padding: 0 }}>
                    <Content
                        style={{
                            padding: '24px 40px',
                            margin: 0,
                            minHeight: 'calc(100vh - 64px)',
                            background: '#fff',
                        }}
                    >
                        <Typography.Title level={2} style={{ marginBottom: '24px' }}>历史会议
                        <Input
                            placeholder="搜索会议..."
                            onChange={e => handleSearch(e.target.value)}
                            style={{  width: '150px', float:'right' }}
                        /></Typography.Title>
                        {filteredMeetings.map(meeting => (
                            <div 
                                key={meeting.id} 
                                style={{ 
                                    margin: '16px 0',
                                    padding: '24px',
                                    border: '1px solid #f0f0f0',
                                    borderRadius: '8px',
                                    backgroundColor: '#fafafa',
                                    transition: 'all 0.3s ease',
                                    cursor: 'pointer',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
                                    '&:hover': {
                                        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                                        transform: 'translateY(-2px)',
                                    }
                               }}
                            >
                                <div style={{ flex: '1' }}>
                                    <Text strong style={{ fontSize: '16px', display: 'block', marginBottom: '8px' }}>
                                        {meeting.title}
                                    </Text>
                                    <div style={{ display: 'flex', gap: '24px', color: '#666' }}>
                                        <Text>
                                            <ClockCircleOutlined style={{ marginRight: '8px' }} />
                                            {meeting.time}
                                        </Text>
                                        <Text>
                                            <FieldTimeOutlined style={{ marginRight: '8px' }} />
                                            {meeting.duration}
                                        </Text>
                                        <Text style={{ color: meeting.status === '进行中' ? 'green' : meeting.status === '未开始' ? 'blue' : 'red' }}>
                                            {meeting.status}
                                        </Text>
                                    </div>
                                </div>
                                <Button 
                                    type="primary"
                                    onClick={() => navigate(`${detailMeetingPath}/${meeting.id}`)}
                                    style={{
                                        borderRadius: '6px',
                                        height: '36px',
                                        padding: '0 20px',
                                        fontSize: '14px',
                                        background: '#1890ff',
                                        border: 'none',
                                    }}
                                >
                                    查看详情
                                </Button>
                            </div>
                        ))}
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    );
}

export default Hisvideo;